﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <style>
	html,body { height:100%; width:100%; margin:0; padding:0;align:left;valign:left;}
	div{width:100%; margin:0; padding:0;align:left;valign:left;}
	</style>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
</head>

<body onload="GetRequest()">
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:250px;width:350px;border:0px;text-align:left;"></div>
    <script type="text/javascript">
	
	//获取
	function GetRequest() {
		var url = location.search; //获取url中"?"符后的字串
		url=decodeURI(url);
		var theRequest = new Array();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
				theRequest[i]=(strs[i].split("=")[1]);
			}
		}
		//解析monthArray
		var monthArray=new Array();
		monthArray=theRequest[0].split("','");
		monthArray[0]=monthArray[0].substr(2);
		monthArray[monthArray.length-1]=monthArray[monthArray.length-1].substr(0,monthArray[monthArray.length-1].length-2);
		
		//解析flowAmountArray
		var flowAmountArray=new Array();
		flowAmountArray=theRequest[1].split(",");
		flowAmountArray[0]=flowAmountArray[0].substr(1);
		flowAmountArray[flowAmountArray.length-1]=flowAmountArray[flowAmountArray.length-1].substr(0,flowAmountArray[flowAmountArray.length-1].length-1);
		//解析flowUseAmountArray
		var flowUseAmountArray=new Array();
		flowUseAmountArray=theRequest[2].split(",");
		flowUseAmountArray[0]=flowAmountArray[0].substr(1);
		flowUseAmountArray[flowUseAmountArray.length-1]=flowUseAmountArray[flowUseAmountArray.length-1].substr(0,flowUseAmountArray[flowUseAmountArray.length-1].length-1);
		refershView(monthArray,flowAmountArray,flowUseAmountArray);
	}
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{ 
            'echarts':'./js/echarts',
            'echarts/chart/bar' : './js/echarts',
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    var myChart;
    
    //对外开放数据接口，用于刷新图表
    function refershView(monthArray,flowAmountArray,flowUseAmountArray)
    {
    	var option = {
        		tooltip : {
                    show:false
                },
                legend: {
                    selectedMode:false,
                    data:['总流量','实际流量'],
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : false,
                        dataView : {readOnly: true},
                        magicType:['line', 'bar'],
                        restore : false,
                        saveAsImage : false
                    }
                },
                calculable : false,
                grid:{
                	borderWidth:0,
                	backgroundColor:'#FFFFFF',
                	borderColor:'#FFFFFF'
                },
                xAxis : [
                    {
                        type : 'category',
                        data : monthArray,
                    	splitLine: {show: false},
                    	splitArea:{show:false},
                    	axisLine:{show:true,lineStyle:{color:'rgb(198,198,198)'}},
                    	axisTick:{show:false},
                    	axisLabel: {show: true},
                    	boundaryGap:true,
                    	position: 'bottom'
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : false},
                        axisLine:{show:false},
                        splitLine: {show: false},
                        axisLabel: {show: false}                 
                    }
                ],
                textStyle:{
                	fontSize : 20
                },
                series : [
                    {
                        name:'总流量',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: '#56C8EA',
                                label : {
                                    show: true, 
                                    position: 'top',
                                    formatter: function(a, b, c) {
                                        for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
                                            if (option.xAxis[0].data[i] == b) {
                                                return option.series[0].data[i] + c +'M';
                                            }
                                        }
                                    },
                                    textStyle: {
                                        color: '#6D6D6C'
                                    }
                                }
                            }
                        },
                        data:flowAmountArray,
                    },
                    {
                        name:'实际流量',
                        type:'bar',
                        stack: 'sum',
                        itemStyle: {
                            normal: {
                                color: '#F57374',
                                label : {
                                    show: true, 
                                    position: 'top',
                                    formatter: function(a, b, c) {
                                        for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
                                            if (option.xAxis[0].data[i] == b) {
                                                return option.series[0].data[i] + c +'M';
                                            }
                                        }
                                    },
                                    textStyle: {
                                        color: '#6D6D6C'
                                    }
                                }
                            }
                        },
                        data:flowUseAmountArray,
                    }
                ]
        };
    	require(
    	        [
    	            'echarts',
    	            'echarts/chart/bar',
    	        ],
    	        function(ec) {
    	            //--- 折柱 ---
    	            myChart = ec.init(document.getElementById('main'));
    	            myChart.setOption(option,true);
    	        }
    	    );
    }
    </script>
</body>
</html>